import logo from "@assets/logo.png";
import right from "@assets/right.png";
import Icon from "@ui/RJMart/icons";
import LoginHeader from "@page/common/comps/LoginHeader";
import "@page/common/css/commheader.css";
import "@page/common/css/stepcomp.css"


export default function StepComp(props){

    return (
        <div className={'step-comp'}>
            {renderIcons(props)}
            {renderText(props)}
        </div>
    );

}

function  renderIcons(props) {
    const { step } = props;
    if (step == 1) {
        return (
            <div className={"step-comp-stpes"}>
                <DotItem choose={step == 1} step={1} />
                <ArrowItem dotIsBlue={step == 1} />
                <DotItem choose={step == 2} step={2} />
                <ArrowItem dotIsBlue={step > 2} />
                <DotItem choose={step == 3} step={3} />
                <ArrowItem dotIsBlue={step > 3} />
                <DotItem choose={step == 4} step={4} />
            </div>
        );
    } else if (step == 2) {
        return (
            <div className={"step-comp-stpes"}>
                <StepComplete />
                <ArrowItem dotIsBlue={step > 1} />
                <DotItem choose={step == 2} step={2} />
                <ArrowItem dotIsBlue={step > 2} />
                <DotItem choose={step == 3} step={3} />
                <ArrowItem dotIsBlue={step > 3} />
                <DotItem choose={step == 4} step={4} />
            </div>
        );
    } else if (step == 3) {
        return (
            <div className={"step-comp-stpes"}>
                <StepComplete />
                <ArrowItem dotIsBlue={step > 1} />
                <StepComplete />
                <ArrowItem dotIsBlue={step > 2} />
                <DotItem choose={step == 3} step={3} />
                <ArrowItem dotIsBlue={step > 3} />
                <DotItem choose={step == 4} step={4} />
            </div>
        );
    } else if (step == 4) {
        return (
            <div className={"step-comp-stpes"}>
                <StepComplete />
                <ArrowItem dotIsBlue={step > 1} />
                <StepComplete />
                <ArrowItem dotIsBlue={step > 2} />
                <StepComplete />
                <ArrowItem dotIsBlue={step > 3} />
                <StepComplete />
            </div>
        );
    }
    return null;
}

function  renderText(props) {
    const { step } = props;
    return (
        <div className={"step-comp-stpes-texts"}>
            <p
                className={
                    step >= 1
                        ? "step-comp-texts-p1-choose"
                        : "step-comp-texts-p1"
                }
            >
                填写基本资料
            </p>

            <p
                className={
                    step >= 2
                        ? "step-comp-texts-p2-choose"
                        : "step-comp-texts-p2"
                }
            >
                邮箱激活
            </p>
            <p
                className={
                    step >= 3
                        ? "step-comp-texts-p3-choose"
                        : "step-comp-texts-p3"
                }
            >
                完善资料
            </p>
            <p
                className={
                    step >= 4
                        ? "step-comp-texts-p4-choose"
                        : "step-comp-texts-p4"
                }
            >
                注册成功
            </p>
        </div>
    );
}


function StepComplete(props){
    return (
        <div className={"step-comp-item"}>
            <div className={"step-comp-item-dot2"}>
                <Icon type={"check"} color={"#0093EB"} size={"small"} />
            </div>
        </div>
    );
}

function  ArrowItem(props){
    const lists = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
    const { dotIsBlue } = props;
    return (
        <div className={"step-comp-arrows"}>
            {lists.map((item, index) => (
                <div
                    key={index}
                    className={
                        dotIsBlue
                            ? "step-comp-arrow-dot1"
                            : "step-comp-arrow-dot"
                    }
                />
            ))}
            <div className={"step-comp-arrow-right"}>
                <Icon
                    type={"right"}
                    color={dotIsBlue ? "#0093EB" : "#BCBCBC"}
                    size={"small"}
                />
            </div>
        </div>
    );
}

function DotItem(props){
    const { step, choose }=props;
    return (
        <div className={"step-comp-item"}>
            <div
                className={
                    choose
                        ? "step-comp-item-dot"
                        : "step-comp-item-dot1"
                }
            >
                <p>{step}</p>
            </div>
        </div>
    );
}
